wijmenu Step 3 of 3: Creating the View and Adding Wijmo Widgets

In this example, we'll create a View showing a menu on the home page of the project. After that, we’ll use Razor syntax to get the Product Name for each product from the model.

Complete the following steps:

In the Solution Explorer, expand Views and then expand Home.
Double-click the Index.cshtml to open the file. Add the following markup to create an unordered list:
<ul id = “menu”> </ul>

Add the following Razor syntax within the <ul> tags:

@foreach (var c in Model)
    {
        <li><a href="#">@c.CategoryName</a>
            @if (c.Products != null && c.Products.Count > 0)
            {
                <ul>
                    @foreach (var p in c.Products)
                    {
                        <li><a href="#">@p.ProductName</a></li>
   
                    }
                </ul>
            }
        </li>
    }

Expand the Shared folder and double-click _Layout.cshtml to open the file.
Check the dependencies to make sure the project is referencing the latest version of Wijmo.<head> tags. You can find the latest version of the Wijmo dependencies at http://wijmo.com/downloads/cdn/.
In the Solution Explorer, expand Views | Home, and double-click Index.cshtml to open the file.

After the closing </ul>,enter the following jQuery script to initialize the wijmenu widget:

<script type="text/javascript">    
 $(document).ready(function () {
         $("#menu").wijmenu();
     });
    </script>

Press F5 to run the project. The menu will resemble the following:

If you click one of the menu items, a submenu will drop down: